<template>
	<view class="full-height">
		<!-- 按钮组 -->
		<veiw class="defect-tools" v-if="showType === showTypeButton">
			<button v-show="deleteVisible" :size="size" @click="handleDelete(value)" class="button cat2bug-button-delete">{{$t('delete')}}</button>
			<button v-show="editVisible" :size="size" @click="handleEdit(value)" class="button cat2bug-button-modify">{{$t('modify')}}</button>
			<button v-show="addVisible" :size="size" @click="handleAdd(value)" class="button cat2bug-button-create">{{$t('add')}}</button>
		</veiw>
		<!-- 悬浮按钮 -->
		<uni-fab v-else-if="showType === showTypeFab" 
			ref="fab" 
			:pattern="pattern" 
			:content="fabButtons" 
			horizontal="right" 
			vertical="bottom"
			direction="vertical" 
			@trigger="trigger" 
			@fabClick="fabClick" />
		<!-- 修改对话框 -->
		<add-popup ref="addPopup" @create="handleCreateCompleted" @modify="handleModifyCompleted"></add-popup>
	</view>
</template>

<script>
	import { getDefect } from "@/api/system/defect.js"
	import AddPopup from "./add-popup.vue"
	import { delModule } from "@/api/system/module.js";
	import { checkModuleAddPermi, checkModuleDeletePermi, checkModuleEditPermi } from "@/utils/module.js"
	/** 显示按钮类型 */
	const SHOW_TYPE_BUTTON = 'button';
	/** 显示悬浮类型 */
	const SHOW_TYPE_FAB = 'fab';
	/** 代理交付物工具集合 */
	const proxyModuleToolsIdMap = new Map();
	
	export default {
		name: 'ModuleTools',
		components: { AddPopup },
		model: {
		    prop: 'value',
		    event: 'input'
		},
		data() {
			return {
				showTypeButton: SHOW_TYPE_BUTTON,
				showTypeFab: SHOW_TYPE_FAB,
				title: 'uni-fab',
				directionStr: '垂直',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
			}
		},
		props: {
			/** 显示的类型，button：按钮；fab：悬浮 */
			showType: {
				type: String,
				validator: value => [SHOW_TYPE_BUTTON, SHOW_TYPE_FAB].includes(value),
				default: SHOW_TYPE_BUTTON
			},
			/** 交付物 */
			value: {
			  type: Object,
			  default: {
					  moduleId: 0
				  }
			},
			size: {
			  type: String,
			  default: 'default'
			},
			/** 交付物工具的ID */
			moduleToolsId: {
				type: String,
				default: null
			},
			/** 代理操作交付物工具的ID */
			proxyModuleToolsId: {
				type: String,
				default: null
			},
		},
		computed: {
			fabButtons() {
				let buttons = [];
				if(this.addVisible) {
					buttons.push({
						iconPath: '/static/images/common/create.png',
						selectedIconPath: '/static/images/common/create_.png',
						text: this.$i18n.t('create'),
						active: false
					});
				}
				if(this.editVisible) {
					buttons.push({
						iconPath: '/static/images/common/modify.png',
						selectedIconPath: '/static/images/common/modify_.png',
						text: this.$i18n.t('modify'),
						active: false
					});
				}
				if(this.deleteVisible) {
					buttons.push({
						iconPath: '/static/images/common/delete.png',
						selectedIconPath: '/static/images/common/delete_.png',
						text: this.$i18n.t('delete'),
						active: false
					});
				}
				buttons.push({
					iconPath: '/static/images/common/back.png',
					selectedIconPath: '/static/images/common/back_.png',
					text: this.$i18n.t('back'),
					active: false
				});
				return buttons;
			},
		    /** 获取当前用户id */
		    currentUserId: function() {
		        return this.$store.state.user.id;
		    },
			/** 是否显示删除按钮 */
			deleteVisible: function () {
				return checkModuleDeletePermi(this.value, this.currentUserId);
			},
			/** 是否显示编辑按钮 */
			editVisible: function () {
			    return checkModuleEditPermi(this.value, this.currentUserId);
			},
			// 显示添加权限
			addVisible: function () {
				return checkModuleAddPermi(this.value);
			},
		},
		created() {
			this.moduleToolsId && proxyModuleToolsIdMap.set(this.moduleToolsId, this);
		},
		destroyed() {
			this.moduleToolsId && proxyModuleToolsIdMap.delete(this.moduleToolsId);
		},
		methods:{
			trigger(e) {
				switch(e.item.text) {
					case this.$i18n.t('create'):
						this.handleAdd(this.value);
						break;
					case this.$i18n.t('modify'):
						this.handleEdit(this.value);
						break;
					case this.$i18n.t('delete'):
						this.handleDelete(this.value);
						break;
					case this.$i18n.t('back'):
						this.handleBack();
						break;
				}
			},
			fabClick() {},
			/** 返回上一级 */
			handleBack() {
				this.$emit('back');
			},
		    logHandle(log) {
		      this.$emit('log',log);
		    },
		    /** 点击收藏操作 */
		    clickCollectHandle(collect, defect,isRefreshList) {
				// 保存收藏状态
				updateUserDefect(defect.defectId, {
					defectId: defect.defectId,
					userId: this.currentUserId,
					collect: collect?1:0
				}).then(res=>{
				this.$set(defect, 'collect', collect);
					// 如果collect参数存在，表明是点击头部的收藏按钮触发
					if(isRefreshList) {
						this.$emit('update',this.value);
					}
					if(collect) {
						this.$message.success(this.$t('collect-success').toString());
					} else {
						this.$message.success(this.$t('cancel-success').toString());
					}
				});
		    },
		    /** 处理交付物删除事件 */
		    handleDelete(module) {
		    	const self = this;
		    	uni.showModal({
		    		title: this.$i18n.t('prompted'),
		    		content: this.$i18n.t('module.is-delete-module'),
		    		success: function (res) {
		    			if (res.confirm) {
		    				delModule(module.moduleId).then(res=>{
		    					uni.showToast({
		    						title: self.$i18n.t('delete.success')
		    					});
								self.$emit('delete', module);
		    				})
		    			}
		    		}
		    	});
		    },
			/** 打开交付物弹框 */
			showPopup(module) {
				this.$refs.addPopup.open(module);
			},
		    /** 处理交付物编辑事件 */
		    handleEdit(module) {
				// 如果用代理操作
				if(proxyModuleToolsIdMap.has(this.proxyModuleToolsId)) {
					proxyModuleToolsIdMap.get(this.proxyModuleToolsId).showPopup(module);
				} else 
				// 如果用代理操作
				{
					this.showPopup(module);
				}
		    },
		    /** 处理交付物添加事件 */
		    handleAdd(module) {
				const params = {
					moduleId: null,
					modulePid: module.moduleId,
					moduleName: ''
				}
				// 如果用代理操作
				if(proxyModuleToolsIdMap.has(this.proxyModuleToolsId)) {
					proxyModuleToolsIdMap.get(this.proxyModuleToolsId).showPopup(params);
				} else 
				// 不用代理操作
				{
					this.showPopup(params);
				}
		    },
			/** 处理创建完成事件 */
			handleCreateCompleted(module) {
				this.$emit('create', module);
			},
			/** 处理修改完成事件 */
			handleModifyCompleted(module) {
				this.$emit('modify', module);
			},
		}
	}
</script>

<style lang="scss">
	.defect-tools {
		display: inline-flex;
		flex-direction: row;
		flex-wrap: wrap;
		max-width: 100vw;
		height: 100%;
		> .button {
			height: 100%;
			border-radius: 0 !important;  
			border-width: 0 !important;
			display: inline-flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>